<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物超市</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css"
          href="../static/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" type="text/css"
          href="../static/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
    <style>
        div{
            display: block;
        }
        body{
            padding-top: 20px;
            position: relative;

        }
        img{
            transition-duration: 1s;/*设置动画时间*/
        }
        img:hover{
            transform: scale(1.2);/*鼠标在图片上悬停缩放1.2倍*/
        }

        .zong{
            width: 1353px;
            position: relative;
            display: block;
            margin: 0 auto;
            padding: 0;

        }
        .zong_1{
            width: 1300px;
            display: block;
            position: relative;
            margin: 0 auto;
            padding: 0;
            left: -20px;
        }

        /*header头部部分css*/
        .navbar{
            background-color: #d5d5d5;
            border: none;
        }
        .navbar-brand>img{
            position: relative;
            top:-12px;
        }
        /*搜索框样式*/
        #search>input{
            border: none;
            height: 30px;
            border-radius: 30px;
            color: #A9A8A8;
            padding: 10px 20px;
            position: relative;
            top: 10px;
            left: 20px;
            width: 255px;
            outline: none;/*去掉点击后的边框*/
        }
        /*搜索按钮 放大镜样式*/
        #search>button{
            background-color: rgba(0,0,0,0);
            border: none;
            color: gray;
            position: relative;
            top: 12px;
            left: -15px;
        }
        .nav.navbar-nav>li>a{
            color: #4e4848;
            font-size: 17px;
            position: relative;
            padding: 15px 10px;
        }

        .nav.navbar-nav>li>a:hover{
            color: #ff0000;
        }

        /*section(主体)部分css*/
        /*左侧栅格*/
        .bg{
            width: 100%;
        }
        .bg_col img{
            width: 16px;
            height: 16px;
            position: relative;
            top: -2px;
            padding: 0;
            margin: 0;
        }
        .bg_col dl{
            width: 185px;
        }
        .bg_col dd{
            margin-top: 5px;
            margin-left: 20px;
        }
        .bg_col a{
            margin: 0px auto;
        }

        /*中间栅格*/
        .im img{
            transition-duration: 1s;/*设置动画时间*/
            max-width: 100%;
            min-height: 373px;
        }
        .im_a img{
            width: 190px;
        }

        /*好货精品部分*/
        .tit_h_1 i{
            width: 4px;
            min-width: 4px;
            height: 20px;
            display: block;
            margin: 3px 10px 0 0;
            padding: 0;
            background: linear-gradient(285deg,rgba(254,46,84,1) 0,rgba(255,119,119,1) 100%);
            float: left;
        }
        .tit_h_1 b{
            font-size: 20px;
            position: relative;
            display: block;
            padding: 0;
            margin: 7px auto;
            color: rgba(85,85,85,1);
        }
        .tit_h_2 i{
            width: 24px;
            height: 24px;
            color: white;
            display: inline-block;
            text-align: center;
            line-height: 24px;
            background: #ff6f00;
            border-radius: 50%;
            margin: 0 5px;
        }
        .tit_h_3 span{
            position: relative;
            padding: 0;
            margin: 12px 32px;
            display: inline-block;
            left: 10px;
        }
        .tit_h_3 span:hover{
            cursor: pointer;
            color: #FF0100;
        }
        .tit_h_3 a{
            position: relative;
            padding: 0;
            margin: 12px 10px 0 10px;
        }
        .list img{
            width: 120px;
            height: 120px;
            border-radius: 5px;
            float: left;
            margin: 10px 0;
        }

        .list_content p{
            color: rgba(102,102,102,1);
            line-height: 19px;
            margin: 10px 0 12px;
            height: 20px;
            overflow: hidden;
        }

        .list_icon span{
            background: rgba(255,243,243,1);
            border-radius: 2px;
            border: 1px solid rgba(255,197,199,1);
            color: #FF0100;
            font-size: 12px;
            padding: 2px 6px;
            float: left;
            max-width: 150px;
            margin-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .list_icon i{
            background: linear-gradient(90deg,rgba(194,76,255,1) 0,rgba(255,86,134,1) 100%);
            border-radius: 1px;
            color: #fff;
            font-size: 12px;
            padding: 2px 15px;
            margin: 1px 0 0 5px;
            display: inline-block;
        }
        .list_price b{
            color: #9a9a9a;
            border-top: 1px solid #9a9a9a;
            line-height: 0;
            height: 0;
            font-size: 12px;
            display: inline-block;
            font-weight: 400;
            margin-left: 10px;
        }
        .tit_haohuo{
            position: relative;
            left: 22px;
        }
        .tit_haohuo_a{
            width: 240px;
            height: 340px;
            border: 1px solid transparent;/*透明的*/
            border-bottom: 1px solid #F1F1F1;
            border-right: 1px solid #F1F1F1;
            padding: 15px;
            box-sizing: border-box;
            display: block;
            float: left;
            position: relative;
            margin: 0 30px;
        }
        .haohuo_img{
            width: 210px;
            height: 210px;
            overflow: hidden;
            position: relative;
            margin: 0;
            padding: 0;
        }
        .haohuo_img img{
            width: 100%;
            height: 210px;
        }
        .haohuo_brief{
            position: relative;
            top: 10px;
            margin: 0;
            padding: 0;
        }
        .haohuo_brief p{
            color: #494949;
            line-height: 18px;
            height: 18px;
            margin: 11px 0;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        .haohuo_brief_middle{
            color: #9a9a9a;
            font-size: 12px;
            height: 18px;
            display: block;
            padding: 0;
            margin: 0;
        }
        .haohuo_brief_middle_1{
            display: block;
            float: left;
            color: #9a9a9a;
            font-size: 12px;
        }
        .haohuo_brief_middle_2{
            display: block;
            float: right;
            color: #9a9a9a;
            font-size: 12px;
        }
        .haohuo_price{
            color: #fc4d52;
            font-size: 18px;
            height: 35px;
            line-height: 35px;
            margin: 5px 0 0 -4px;
            padding: 0;
        }
        .haohuo_price span{
            font-size: 24px;
            font-weight: 700;
        }
        .haohuo_price b{
            line-height: 14px;
            background-size: 100% 100%;
            font-size: 12px;
            border-radius: 2px;
            font-weight: 400;
            padding: 2px 7px;
            margin: 9px 0;
            position: relative;
            min-width: 57px;
            text-align: center;
            box-sizing: border-box;
            height: 19px;
            float: right;
        }
        .haohuo_price i{
            font-size: 15px;
            margin: 0 2px 0 0;
            position: relative;
            top: 1px;
        }

        /*底部分页部分*/
        .nav_fy a{
            border-radius: 2px;
            box-shadow: none;
            font-weight: 400;
            margin: 0 auto;
        }

        /*返回顶部部分*/
        .go_top{
            width: 60px;
            height: 60px;
            position: fixed;
            z-index: 99;
            bottom: 100px;
            right: 100px;
            margin:0;
            padding: 0;
            border: 1px solid rgba(182,182,182,0.9);
        }
        .go_top img{
            width: 40px;
            height: 40px;
            position: relative;
            margin: 10px;
            padding: 0;
            color: #888888;
        }
        .go_top:hover{
            cursor: pointer;
        }

    </style>
</head>
<body>

<div class="zong">
    <div class="zong_1">
        <!--头部内容 并且是居中 container -->
        <header class="container" style="width: 1320px;margin: 0">
            <!--添加带图片的导航条-->
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!--无序列表-->
                    <ul class="nav navbar-nav">
                        <li class="nav_s"><a href="http://localhost:8080/bIndex">首页</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=方便零食">方便零食</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=奶蛋制品">奶蛋制品</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=饮料酒水">饮料酒水</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=生活用品">生活用品</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=日用百货">日用百货</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=新鲜水果">新鲜水果</a></li>
                        <li class="nav_s"><a href="http://localhost:8080/bGoods?cata=其他">其他</a></li>
                        <li>
                            <form action="selectByName">
                                <div id="search">
                                    <input id="search_text" type="text" placeholder="Search" name="keyword">
                                    <button id="search_button" type="submit" class="glyphicon glyphicon-search"></button>
                                </div>
                            </form>
                        </li>
                    </ul>
                    <!--添加右侧导航条-->
                    <ul class="nav navbar-nav navbar-right">
                        <li th:if="${session.user}==null"><a href="http://localhost:8080/regNow" class="fa fa-user-circle">注册</a></li>
                        <li th:if="${session.user}==null"><a href="http://localhost:8080/loginNow" class="fa fa-user-circle-o">登录</a></li>
                        <li th:if="${session.user}!=null"><a href="http://localhost:8080/cartInfo" class="fa fa-user-circle-o">购物车</a></li>
                        <li th:if="${session.user}!=null"><a href="http://localhost:8080/goOrders" class="fa fa-user-circle-o">订单</a></li>
                        <li th:if="${session.user}!=null"><a href="http://localhost:8080/selAddress"  class="fa fa-user-circle-o">地址管理</a></li>
                        <li th:if="${session.user}!=null"><a href="http://localhost:8080/bLoginOut" class="fa fa-user-circle-o">退出</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        <!--主体部分-->
        <section>
            <div class="section_z">
                <div class="container" style="width: 1290px;margin: 20px 15px;padding: 0">
                    <!--轮播图开始-->
                    <div class="bg">
                        <div class="container" style="width: 1290px;margin: 0;padding: 0">
                            <div id="myCarousel" class="carousel slide">
                                <!-- 轮播（Carousel）指标 -->
                                <ol class="carousel-indicators">
                                    <!--<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#myCarousel" data-slide-to="1"></li>
                                    <li data-target="#myCarousel" data-slide-to="2"></li>
                                    <li data-target="#myCarousel" data-slide-to="3"></li>-->
                                    <li th:each="b:${banners}" data-target="#myCarousel" data-slide-to="0" class="circle">
                                </ol>
                                <!-- 轮播（Carousel）项目 -->
                                <div class="im">
                                    <div class="carousel-inner">
                                        <div th:each="b:${banners}" class="item">
                                            <img th:src="${b.imgurl}" alt="First slide">
                                            <div class="carousel-caption"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 轮播（Carousel）导航 -->
                                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--轮播图结束-->
                </div>
                <!--新品上架-->
                <div class="container" style="min-width: 1320px;margin: 0">
                    <div class="tit">
                        <div class="panel panel-default">
                            <!--导航开始-->
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-3">
                                        <p class="tit_h_1">
                                            <i></i>
                                            <b>最新上架</b>
                                        </p>
                                    </div>
                                    <div class="col-md-6"></div>
                                    <div class="col-md-3">
                                        <div class="tit_h_3">
                                            <a href="http://localhost:8080/bMore"><span class="add pull-right">查看更多</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--导航结束-->
                            <!--内容开始-->
                            <div class="panel-body">
                                <div class="tit_haohuo" th:each="g1:${list}">
                                    <div class="grid">
                                        <a th:href="'http://localhost:8080/detail?id='+${g1.id}">
                                            <div class="tit_haohuo_a">
                                                <div class="haohuo_img">
                                                    <img th:src="${g1.imgurl}">
                                                </div>
                                                <div class="haohuo_brief">
                                                    <p>
                                                        <span th:text="${g1.name}"></span>
                                                    </p>
                                                    <div class="haohuo_brief_middle">
                                                        <span class="haohuo_brief_middle_1">价格<i th:text="${g1.price}"></i></span>
                                                        <span class="haohuo_brief_middle_2">销量<i th:text="${g1.salesum}"></i></span>
                                                    </div>
                                                    <div class="haohuo_price">￥
                                                        <span th:text="${g1.price}"></span>
                                                        <b>库存:<i th:text="${g1.sum}"></i></b>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!--内容结束-->
                        </div>
                    </div>
                </div>
                <!--新品上架结束-->
                <!--热销商品-->
                <div class="container" style="min-width: 1320px;margin: 0">
                    <div class="tit">
                        <div class="panel panel-default">
                            <!--导航开始-->
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-3">
                                        <p class="tit_h_1">
                                            <i></i>
                                            <b>热销商品</b>
                                        </p>
                                    </div>
                                    <div class="col-md-6"></div>
                                    <div class="col-md-3">
                                        <div class="tit_h_3">
                                            <a href="http://localhost:8080/bMore"><span class="add pull-right">查看更多</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--导航结束-->
                            <!--内容开始-->
                            <div class="panel-body">
                                <div class="tit_haohuo">
                                    <div class="grid">
                                        <a th:each="g2:${list1}" th:href="'http://localhost:8080/detail?id='+${g2.id}">
                                            <div class="tit_haohuo_a">
                                                <div class="haohuo_img">
                                                    <img th:src="${g2.imgurl}">
                                                </div>
                                                <div class="haohuo_brief">
                                                    <p>
                                                        <span th:text="${g2.name}"></span>
                                                    </p>
                                                    <div class="haohuo_brief_middle">
                                                        <span class="haohuo_brief_middle_1">价格<i th:text="${g2.price}"></i></span>
                                                        <span class="haohuo_brief_middle_2">销量<i th:text="${g2.salesum}"></i></span>
                                                    </div>
                                                    <div class="haohuo_price">￥
                                                        <span th:text="${g2.price}"></span>
                                                        <b>库存:<i th:text="${g2.sum}"></i></b>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!--内容结束-->
                        </div>
                    </div>
                </div>
                <!--热销商品结束-->
            </div>
        </section>
        <!--小火箭-->
        <div class="go_top">
            <a href="#"><img src="../static/images/top.png"></a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../static/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript" src="../static/js/vue.js"></script>
<script>
    /*轮播图*/
    $('#myCarousel').carousel({interval: 3000}).carousel('cycle');
    //让轮播图中第一个圆圈变成实心圆
    $(".item:eq(0)").attr("class","item active");
    //调用处理布局的方法  需要在所有图片全部加装完之后在调用
    $(".grid").imagesLoaded().progress(function () {
        //当所有图片加载完成之后自动调用此方法 解决图片层叠到一起的bug
        $(".grid").masonry("layout");
    })


</script>
<script src="js/jquery.js"></script>
</html>